<template>
  <view v-if="shenheStatus != 1 || !shenheAliStatus" class="page">
    <!-- #ifndef MP-TOUTIAO -->
    <view
      class="cat-title"
      :style="{ paddingTop: `calc(${statusBarHeight}px)` }"
      >{{ $t("title.cart") }}</view
    >
    <!-- #endif -->

    <!-- 购物车管理及商品数量 -->
    <view class="fixedBox" v-if="isLogin">
      <view class="locationBox">
        <!-- #ifdef WEB -->
        <view></view>
        <!-- #endif -->
        <!-- #ifndef WEB -->
        <view class="flex" @click="scan">
          <i class="iconfont icon-scanning"></i> 扫码加入购物车
        </view>
        <!-- #endif -->

        <view class="flex flexedBoxRight">
          <view class="location">
            购物车商品共({{ cart_list.length || mch_list.length }})件商品
          </view>
          <view class="editLocation" v-if="cart_list.length || mch_list.length">
            <text @click="edit = !edit">{{
              edit ? $t("cart.complate") : $t("cart.manage")
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="shoppingcart">
      <scroll-view :style="[boxStyle]" scroll-y @scroll="pageScroll">
        <!-- 购物车为空 -->
        <view class="no-goods" v-if="!cart_list.length && !mch_list.length">
          <template v-if="this.$utils.isLogin(false)">
            <image
              style="margin: auto"
              src="https://chidian.chixiaodian.com/web/uploads/images/store_1/2022-01-14/7f0eca5fb786dfa29deb46af731ab35dd4bb1e66.png"
              mode="aspectFit"
            ></image>
            <view class="no-goods-text">购物车是空的</view>
            <view class="no-goods-btn" @click="gotoAdd">去挑选</view>
          </template>
          <template v-else>
            <view class="no-goods-text">用户未登录</view>
            <view
              class="no-goods-btn"
              @click="$utils.toUrl('/login/login/login_page')"
              >去登录</view
            >
          </template>
        </view>

        <view class="cartBox">
          <view class="shoppingcart-list" v-if="cart_list && cart_list.length">
            <!-- 全选、店铺名称 -->
            <view class="list-title">
              <view>
                <i
                  v-if="!$utils.ischecked(cart_list)"
                  @click="allSelectGoods(0)"
                  class="iconfont icon-xuanzekuangmoren"
                  style="font-size: 44rpx; color: #707070"
                ></i>
                <i
                  v-if="$utils.ischecked(cart_list)"
                  @click="allSelectGoods(1)"
                  class="iconfont icon-success-fill"
                  style="font-size: 44rpx; color: #f0250e"
                ></i>
                <view class="list-title-right">
                  <i
                    class="iconfont icon-store"
                    style="font-size: 40rpx; margin: 0"
                  ></i>
                  <view>{{ mdData ? mdData.name : "平台自营" }}</view>
                </view>
              </view>
              <!-- Todo 功能未实现, 暂时隐藏 -->
              <view v-show="discountData.list.length">
                <view @click="clickDiscount">{{ $t("common.coupon") }}</view>
              </view>
            </view>
            <!-- 全选、店铺名称 -->
            <u-swipe-action
              v-for="(item, index) in cart_list"
              :key="item.cart_id"
              :index="index"
              :options="options"
              :show="item.show"
              @click="(e, index) => clickOption(e, index, 'cart')"
              @open="(e) => openOption(e, 'cart')"
            >
              <view class="list-content">
                <view class="content-left">
                  <i
                    v-if="!item.is_checked"
                    @click="selectGoods(index, item)"
                    class="iconfont"
                    :style="{
                      fontSize: '44rpx;',
                      color: goodsDisabled(item) ? '#BFBFBF' : '#707070'
                    }"
                    :class="[
                      goodsDisabled(item)
                        ? 'icon-reduce-fill'
                        : 'icon-xuanzekuangmoren'
                    ]"
                  ></i>
                  <i
                    v-if="item.is_checked"
                    @click="selectGoods(index)"
                    class="iconfont"
                    :class="[
                      goodsDisabled(item)
                        ? edit
                          ? 'icon-success-fill'
                          : 'icon-reduce-fill'
                        : 'icon-success-fill'
                    ]"
                    :style="{
                      fontSize: '44rpx;',
                      color: goodsDisabled(item)
                        ? edit
                          ? '#f0250e'
                          : '#BFBFBF'
                        : '#f0250e'
                    }"
                  ></i>
                </view>
                <view
                  :class="[
                    'content-right',
                    index == cart_list.length - 1 ? 'noBorder' : ''
                  ]"
                  @click="entryShopDetails(item.goods_id)"
                >
                  <view class="goods-pic">
                    <image
                      class="pic"
                      :src="item.goods_pic"
                      mode="aspectFill"
                    ></image>
                    <goodsSaleNo
                      :imgHeight="'140rpx'"
                      :goodsInfo="item"
                    ></goodsSaleNo>
                  </view>
                  <view
                    class="content-right-one"
                    :class="[goodsDisabled(item) ? 'content-grey' : '']"
                  >
                    <!-- 商品名字 -->
                    <view class="content-right-one-title">{{
                      item.goods_name
                    }}</view>
                    <!-- 商品名字 -->

                    <!-- 商品规格 -->
                    <view
                      class="content-right-one-configure"
                      v-if="item.attr_list.length != 0"
                      @click.stop="chooseSku(item)"
                    >
                      <view class="skuBox">
                        <view class="text-more-1">
                          <text
                            style="margin-right: 8rpx"
                            v-for="(attritem, arrtindex) in item.attr_list"
                            :key="arrtindex"
                          >
                            {{ attritem.attr_group_name }}:{{
                              attritem.attr_name
                            }}
                          </text>
                        </view>
                        <image
                          :src="asyncImgs.common.icon_down"
                          mode="aspectFit"
                          v-if="asyncImgs.common"
                        ></image>
                      </view>
                    </view>

                    <template v-if="item.seckill_activity_goods">
                      <view
                        class="seckill-con"
                        v-if="
                          parseInt(item.seckill_activity_goods.self_limit_num)
                        "
                      >
                        限购{{
                          item.seckill_activity_goods.self_limit_num
                        }}件<text class="seckill-line"></text>限时抢购
                      </view>
                    </template>

                    <view
                      class="seckill-times"
                      v-if="item.seckill_activity_goods"
                    >
                      <view class="let">秒杀</view>
                      <text class="seckill-line"></text>
                      倒计时
                      {{ getDownTime(item.seckill_activity_goods.countDown) }}
                    </view>

                    <view class="goods-seckill" v-if="item.delivery_rules">
                      {{ item.delivery_rules.name }}：{{
                        item.delivery_rules.times
                      }}
                    </view>

                    <!-- 限购 -->
                    <view class="snap" v-if="item.confine_count > 0">
                      <view
                        >{{ $t("cart.limit") }}{{ item.confine_count }}</view
                      >
                      <text></text>
                      <view>{{ $t("cart.flash") }}</view>
                    </view>
                    <!-- 限购 -->

                    <!-- 价格、选择数量 -->
                    <view class="price">
                      <view>
                        <text>￥</text>
                        <text>{{ item.price | priceBeforeZero }}</text>
                        <text>{{ item.price | priceAfterZero }}</text>
                      </view>
                      <view @click.stop="" v-if="!goodsDisabled(item)">
                        <numberStep
                          :disabled="goodsDisabled(item)"
                          :value="item.num"
                          :min="1"
                          @input="(e) => valChange(-1, index, e)"
                        ></numberStep>
                      </view>
                    </view>
                    <!-- 价格、选择数量 -->
                  </view>
                </view>
              </view>
            </u-swipe-action>
          </view>
          <!-- 自营商品 -->
          <!-- 店铺商品 -->
          <template v-if="mch_list && mch_list.length > 0">
            <view
              class="shoppingcart-list"
              v-for="(item, index) in mch_list"
              :key="index"
            >
              <!-- 全选、店铺名称 -->
              <view class="list-title">
                <view>
                  <image
                    v-if="!$utils.ischecked(item.list)"
                    @click="allSelectListGoods(0, index)"
                    :src="asyncImgs.shopingcart.noselect"
                    mode="aspectFit"
                  ></image>
                  <image
                    v-if="$utils.ischecked(item.list)"
                    @click="allSelectListGoods(1, index)"
                    :src="asyncImgs.shopingcart.select"
                    mode="aspectFit"
                  ></image>
                  <view class="list-title-right">
                    <i
                      class="iconfont icon-store"
                      style="font-size: 40rpx; margin: 0"
                    ></i>
                    <view>{{ item.name }}</view>
                  </view>
                </view>

                <view>
                  <view
                    @click="clickDiscount"
                    v-show="discountData.list.length"
                  >
                    {{ $t("common.coupon") }}
                  </view>
                </view>
              </view>
              <!-- 全选、店铺名称 -->
              <u-swipe-action
                v-for="(listitem, listindex) in item.list"
                :key="listindex"
                :index="listindex"
                :options="options"
                :show="listitem.show"
                @click="
                  (e, option) => {
                    clickOption(e, option, 'mch', index);
                  }
                "
                @open="
                  (e) => {
                    openOption(e, 'mch', index);
                  }
                "
              >
                <view class="list-content">
                  <view class="content-left">
                    <image
                      v-if="!listitem.is_checked"
                      :src="asyncImgs.shopingcart.noselect"
                      mode="aspectFit"
                      @click="selectListGoods(index, listindex)"
                    ></image>
                    <image
                      v-if="listitem.is_checked"
                      :src="asyncImgs.shopingcart.select"
                      mode="aspectFit"
                      @click="selectListGoods(index, listindex)"
                    ></image>
                  </view>
                  <view
                    :class="[
                      'content-right',
                      listindex == item.list.length - 1 ? 'noBorder' : ''
                    ]"
                    @click="entryShopDetails(listitem.goods_id)"
                  >
                    <view class="goods-pic">
                      <image
                        style="width: 200rpx; height: 200rpx"
                        :src="listitem.goods_pic"
                        mode="aspectFit"
                      ></image>

                      <goodsSaleNo
                        :imgHeight="'140rpx'"
                        :goodsInfo="listitem"
                      ></goodsSaleNo>
                    </view>
                    <view
                      class="content-right-one"
                      :class="[goodsDisabled(listitem) ? 'content-grey' : '']"
                    >
                      <!-- 商品名字 -->
                      <view class="content-right-one-title">{{
                        listitem.goods_name
                      }}</view>
                      <!-- 商品名字 -->

                      <!-- 商品规格 -->
                      <view
                        class="content-right-one-configure"
                        v-if="listitem.attr_list.length != 0"
                        @click.stop="chooseSku(listitem)"
                      >
                        <view class="skuBox">
                          <view class="text-more-1">
                            <text
                              style="margin-right: 8rpx"
                              v-for="(
                                attritem, arrtindex
                              ) in listitem.attr_list"
                              :key="arrtindex"
                            >
                              {{ attritem.attr_group_name }}:{{
                                attritem.attr_name
                              }}
                            </text>
                          </view>
                          <image
                            :src="asyncImgs.common.icon_down"
                            mode="aspectFit"
                            v-if="asyncImgs.common"
                          ></image>
                        </view>
                      </view>
                      <!-- 商品规格 -->

                      <!-- 库存不足 -->
                      <view
                        class="content-right-onepromotion"
                        v-if="listitem.num > listitem.max_num"
                      >
                        <view>{{ $t("cart.inventory") }}</view>
                      </view>
                      <!-- 库存不足 -->

                      <!-- 限购 -->
                      <view class="snap" v-if="item.confine_count > 0">
                        <view
                          >{{ $t("cart.limit") }}{{ item.confine_count }}</view
                        >
                        <text></text>
                        <view>{{ $t("cart.flash") }}</view>
                      </view>
                      <!-- 限购 -->

                      <!-- 价格、选择数量 -->
                      <view class="price">
                        <view>￥{{ listitem.price | price }}</view>
                        <view @click.stop="">
                          <numberStep
                            :disabled="goodsDisabled(item)"
                            :value="listitem.num"
                            :min="1"
                            @input="(e) => valChange(index, listindex, e)"
                          >
                          </numberStep>
                        </view>
                      </view>
                      <!-- 价格、选择数量 -->
                    </view>
                  </view>
                </view>
              </u-swipe-action>
            </view>
          </template>
        </view>
        <!-- 自营商品 -->
        <!-- 店铺商品 -->
        <u-modal
          v-model="show"
          :show-cancel-button="true"
          @confirm="confirmDelete"
          :content="$t('cart.cancle1') + total_num + $t('cart.cancle2')"
        >
        </u-modal>
      </scroll-view>
      <!-- 结算内容 -->
    </view>
    <view
      v-if="!isAnyLevelMember && cart_list.length > 0 && levelPrice > 0"
      class="cart_tip"
    >
      开通会员预计最低可省 ￥{{ levelPrice }}
    </view>
    <view class="cart_tip" v-if="cart_list.length > 0 && shipping_fee.diff > 0"
      >温馨提示：还差{{ shipping_fee.diff }}元即可减免运费
    </view>
    <view
      :class="['cart-bottom', this.useFoot ? 'bottomStyle' : '']"
      v-if="edit == false && (cart_list.length || mch_list.length)"
    >
      <view>
        <view>
          <i
            v-if="$utils.allischecked(mch_list, cart_list) == false"
            @click="allGoodsCheck(0)"
            :style="{
              fontSize: '44rpx;',
              color: '#707070'
            }"
            class="iconfont icon-xuanzekuangmoren"
          ></i>
          <i
            v-if="$utils.allischecked(mch_list, cart_list) == true"
            @click="allGoodsCheck(1)"
            class="iconfont icon-success-fill"
            :style="{
              fontSize: '44rpx;',
              color: '#f0250e'
            }"
          ></i>
          <view>{{ $t("cart.all") }}</view>
        </view>
      </view>
      <view>
        <view class="total-price-box">
          <view>合计:</view>
          <view class="price-box">
            <text>￥</text>
            <text>{{ total_price | priceBeforeZero }}</text>
            <text>{{ total_price | priceAfterZero }}</text>
          </view>
        </view>
        <view @click="setTlement">{{ $t("cart.toPay") }}({{ total_num }})</view>
      </view>
    </view>
    <!-- 结算内容 -->
    <!-- 编辑时底部内容 -->
    <view
      class="cart-adit"
      v-if="edit == true && (cart_list.length || mch_list.length)"
    >
      <view>
        <i
          v-if="$utils.allischecked(mch_list, cart_list) == false"
          @click="allGoodsCheck(0)"
          :style="{
            fontSize: '44rpx;',
            color: '#707070'
          }"
          class="iconfont icon-xuanzekuangmoren"
        ></i>
        <i
          v-if="$utils.allischecked(mch_list, cart_list) == true"
          @click="allGoodsCheck(1)"
          class="iconfont icon-success-fill"
          :style="{
            fontSize: '44rpx;',
            color: '#f0250e'
          }"
        ></i>

        <view>{{ $t("cart.all") }}</view>
      </view>
      <view>
        <view @click="deleteSelectGoods"
          >{{ $t("cart.delete") }}({{ total_num }})</view
        >
      </view>
    </view>
    <!-- 编辑时底部内容 -->
    <view class="footNav fixed">
      <footNav :controlList="controls"></footNav>
    </view>
    <!-- 规格弹框 -->
    <chooseSku
      ref="sku-popup"
      :skuData="skuData"
      :goodsInfo="cartGoodInfo"
      @confirm="getShopList"
    ></chooseSku>
    <!-- 优惠券弹框 -->
    <chooseDiscount ref="discount-popup" :discountData="discountData">
    </chooseDiscount>
    <!-- 全局过渡组件 -->
    <transitionPage></transitionPage>
  </view>
  <Shenhe v-else></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import chooseSku from "@/components/goods/chooseSku.vue";
import chooseDiscount from "@/components/goods/chooseDiscount.vue";
import goodsSaleNo from "@/components/goodsSaleNo/index.vue";
import numberStep from "@/components/cyyUi/numberStep/index.vue";
import footNav from "@/components/diyNew/footNav/index.vue";

export default {
  components: {
    Shenhe,
    chooseSku,
    chooseDiscount,
    goodsSaleNo,
    numberStep,
    footNav
  },
  data() {
    return {
      show: false,
      top: 0,
      timestamp: 86400,
      value: 1,
      edit: false,
      cart_list: [], //自营商品
      mch_list: [], //店铺商品
      total_price: 0, //商品总价格
      total_num: 0, //商品总数量
      select_cartid: [], //删除商品时选中的cart_id
      select_msg: [],
      useFoot: false,
      bottom: 0,
      scrollTop: 0, // 页面滑动距离
      height: [],
      // 是否显示位置
      showLocation: true,
      // 店铺标题是否固定
      showFixedShop: false,
      // 当前固定店铺
      fixedShop: {},
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#f2200b"
          }
        }
      ],
      // 显示选择sku组件
      showSku: false,
      // 显示选择优惠组件
      showDiscount: false,
      // sku传递参数
      skuData: {},
      // 优惠卷组件传递参数
      discountData: {
        list: []
      },
      // 正在选择规格的商品
      choosedGood: {},
      // 默认地址
      address: null,
      mdData: null,
      cartGoodInfo: 0,
      levelPrice: 0, // 开通会员最多可省
      freight: 0, // 运费
      list: [],
      shipping_fee: [],
      isLogin: false
    };
  },
  watch: {
    cart_list: {
      handler() {
        this.calculateLevelPrice();
        this.calculateShippingFee();
      },
      deep: true
    }
  },
  mounted() {
    this.calculateLevelPrice();
    this.calculateShippingFee();
  },
  methods: {
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },

    countDownDataItem(endTime, listItem) {
      let currentTime = new Date().getTime(),
        // timeStr = new Date(endTime.replace(/-/g, "/")).getTime(),
        activeTime = endTime,
        item = [],
        is = 0; // 0距离结束 1距离开始

      if (activeTime - currentTime > 0) {
        // 如果活动未结束，对时间进行处理

        let time = (activeTime - currentTime) / 1000;

        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24)),
          hou = this.formatNumber(parseInt((time % (60 * 60 * 24)) / 3600)),
          min = this.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
          ),
          sec = this.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
          );

        item = [day, hou, min, sec, is];
      } else {
        item = [];
        clearInterval(listItem.timer);
      }

      this.$set(listItem.seckill_activity_goods, "countDown", item);
    },

    goodsDisabled(item) {
      if (item) {
        if (item.max_num <= 0) {
          return true;
        }
        if (item.status <= 0) {
          return true;
        }
      }
      return false;
    },
    // 显示优惠券弹框
    clickDiscount() {
      // 已领优惠券列表
      this.$refs["discount-popup"].showPopup();
    },
    //进入商品详情页
    entryShopDetails(id) {
      uni.navigateTo({
        url: "/goods/goods/goods?id=" + id
      });
    },
    //去结算
    setTlement() {
      this.$u.throttle(() => {
        if (this.total_num == 0) {
          uni.showToast({
            title: "请选择商品",
            icon: "none"
          });
          return;
        }
        var mch_list = [];
        var mch_0 = {
          mch_id: 0,
          goods_list: []
        };
        this.cart_list.forEach((cart) => {
          if (cart.is_checked) {
            mch_0.goods_list.push({
              cart_id: cart.cart_id
            });
          }
        });
        if (mch_0.goods_list.length > 0) {
          mch_list.push(mch_0);
        }
        this.mch_list.forEach((mch) => {
          var mch_info = {
            mch_id: mch.id,
            goods_list: []
          };
          mch.list.forEach((cart) => {
            if (cart.is_checked) {
              mch_info.goods_list.push({
                cart_id: cart.cart_id
              });
            }
          });
          if (mch_info.goods_list.length > 0) {
            mch_list.push(mch_info);
          }
        });
        uni.navigateTo({
          url:
            "/order/order-submit/order-submit?submit=" +
            JSON.stringify(mch_list)
        });
      }, 500);
    },
    deleteSelectGoods() {
      if (this.total_num == 0) {
        uni.showToast({
          title: "请选择商品",
          icon: "none"
        });
        return;
      }
      this.show = true;
    },
    //确定删除
    confirmDelete() {
      uni.showLoading({
        title: "删除中..."
      });
      var params = {
        cart_id_list: JSON.stringify(this.select_cartid)
      };
      this.$allrequest.goodscart.deleteCart(params).then((res) => {
        uni.hideLoading({});

        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        if (res.code == 0) {
          this.getShopList();
        }
      });
    },
    //自营商品全选
    allSelectGoods(status) {
      if (status == 0) {
        for (var item in this.cart_list) {
          if (this.goodsDisabled(this.cart_list[item])) {
            this.cart_list[item].is_checked = false;
          } else {
            this.cart_list[item].is_checked = true;
          }
        }
      } else {
        for (var item in this.cart_list) {
          this.cart_list[item].is_checked = false;
        }
      }
      this.countPrice();
    },
    //自营商品选择
    selectGoods(index, item) {
      if (this.goodsDisabled(item) && !this.edit) return;
      this.cart_list[index].is_checked = !this.cart_list[index].is_checked;
      this.countPrice();
    },
    //店铺商品全选
    allSelectListGoods(status, index) {
      if (status == 0) {
        for (var item in this.mch_list[index].list) {
          this.mch_list[index].list[item].is_checked = true;
        }
      } else {
        for (var item in this.mch_list[index].list) {
          this.mch_list[index].list[item].is_checked = false;
        }
      }
      this.countPrice();
    },
    //店铺商品选择
    selectListGoods(index, listindex) {
      this.mch_list[index].list[listindex].is_checked =
        !this.mch_list[index].list[listindex].is_checked;
      this.countPrice();
    },
    //购物车全部商品全选
    allGoodsCheck(status) {
      if (status == 0) {
        for (var item in this.cart_list) {
          this.cart_list[item].is_checked = true;
        }
        for (var itemone in this.mch_list) {
          for (var itemtwo in this.mch_list[itemone].list) {
            this.mch_list[itemone].list[itemtwo].is_checked = true;
          }
        }
      } else {
        for (var item in this.cart_list) {
          this.cart_list[item].is_checked = false;
        }
        for (var itemone in this.mch_list) {
          for (var itemtwo in this.mch_list[itemone].list) {
            this.mch_list[itemone].list[itemtwo].is_checked = false;
          }
        }
      }
      this.countPrice();
    },
    //计算购物车所选商品总价格和数量
    countPrice() {
      var price = 0;
      var num = 0;
      var selectgood = [];
      var s = [];
      var c = {};
      var b = [];
      var a = {};

      for (var i = 0; i < this.cart_list.length; i++) {
        if (this.cart_list[i].is_checked == true) {
          price = price + Number(this.cart_list[i].price);
          num = num + 1;
          selectgood = selectgood.concat(this.cart_list[i].cart_id);
          a.goods_id = this.cart_list[i].goods_id;
          a.num = this.cart_list[i].num;

          b = b.concat(a);
        }
      }
      if (b.length != 0) {
        c.mch_id = 0;
        c.goods_list = b;
        s = s.concat(c);
      }
      for (var j = 0; j < this.mch_list.length; j++) {
        var aa = {},
          bb = [],
          cc = {};
        for (var m = 0; m < this.mch_list[j].list.length; m++) {
          if (this.mch_list[j].list[m].is_checked == true) {
            price = price + Number(this.mch_list[j].list[m].price);
            num = num + 1;
            selectgood = selectgood.concat(this.mch_list[j].list[m].cart_id);
            aa.cart_id = this.mch_list[j].list[m].cart_id;
            bb = bb.concat(aa);
            cc.mch_id = this.mch_list[j].list[0].mch_id;
            cc.goods_list = bb;
            s = s.concat(cc);
          }
        }
      }
      this.total_price = price.toFixed(2);
      this.total_num = num;
      this.select_cartid = selectgood;
      this.select_msg = s;
    },
    //获取购物车所有商品
    getShopList(type = false) {
      var params = {};
      this.$allrequest.goodscart.getCartList(params).then((res) => {
        if (res.code == 0) {
          if (!type) {
            this.discountData.list = JSON.parse(
              JSON.stringify(res.data.coupon_list)
            );
            var cartarr = res.data.list;
            for (var i = 0; i < cartarr.length; i++) {
              cartarr[i].is_checked = false;
              cartarr[i].show = false;
            }

            var mcharr = res.data.mch_list;
            for (var j = 0; j < mcharr.length; j++) {
              for (var m = 0; m < mcharr[j].list.length; m++) {
                mcharr[j].list[m].is_checked = false;
                mcharr[j].list[m].show = false;
              }
            }
            this.mch_list = JSON.parse(JSON.stringify(mcharr));
            this.cart_list = JSON.parse(JSON.stringify(cartarr));
            this.shipping_fee = res.data.shipping_fee;
            console.log(this.shipping_fee);
            if (this.cart_list.length) {
              this.cart_list.forEach((el) => {
                if (!el.disabled) el.is_checked = true;

                if (el.seckill_activity_goods) {
                  el.timer = null;
                  el.countDown = [];
                  clearInterval(el.timer);
                  this.countDownDataItem(
                    el.seckill_activity_goods.end_time * 1000,
                    el
                  );
                  el.timer = setInterval(() => {
                    this.countDownDataItem(
                      el.seckill_activity_goods.end_time * 1000,
                      el
                    );
                  }, 1000);
                }
              });
            }

            if (this.mch_list.length) {
              this.mch_list.forEach((el) => {
                if (el.seckill_activity_goods) {
                  el.timer = null;
                  el.countDown = [];
                  clearInterval(el.timer);
                  this.countDownDataItem(
                    el.seckill_activity_goods.end_time * 1000,
                    el
                  );
                  el.timer = setInterval(() => {
                    this.countDownDataItem(
                      el.seckill_activity_goods.end_time * 1000,
                      el
                    );
                  }, 1000);
                }
              });
            }

            this.$nextTick(() => {
              this.getHeight();
            });
          } else {
            res.data.list.forEach((el) => {
              let item = this.cart_list.find((e) => e.cart_id === el.cart_id);
              if (item) {
                item.price = parseFloat(el.price);
                item.original_price = parseFloat(el.original_price);
                item.num = el.num;
              }
            });
          }

          this.countPrice();
        }
      });
    },
    //步进器
    valChange(mchIndex, cartIndex, e) {
      this.$u.debounce(() => {
        var cart_list = JSON.parse(JSON.stringify(this.cart_list));
        var mch_list = JSON.parse(JSON.stringify(this.mch_list));
        if (mchIndex < 0) {
          var cart_id = cart_list[cartIndex].cart_id;
        } else {
          var cart_id = mch_list[mchIndex].list[cartIndex].cart_id;
        }
        this.$allrequest.goodscart
          .updateNum(
            {
              cart_id: cart_id,
              num: e
            },
            true
          )
          .then(() => {
            this.getShopList(true);
          });
      }, 1000);
    },
    // 页面滚动
    pageScroll(e) {
      let top = e.detail.scrollTop;
      if (top < 54) {
        this.showLocation = true;
      } else {
        if (top < this.scrollTop) {
          this.showLocation = true;
        } else {
          this.showLocation = false;
        }
      }
      this.scrollTop = top;
    },
    // 获取店铺高度
    getHeight() {
      const that = this;
      let view = uni.createSelectorQuery().selectAll(".shoppingcart-list");
      view
        .boundingClientRect(function (data) {
          //获取固定尾部的高度=data.height
          let height = [];
          data.forEach((item) => {
            height.push(item.top);
          });
          that.height = height;
        })
        .exec();
    },
    openOption(index, type, mchIndex) {
      if (type == "cart") {
        this.cart_list[index].show = true;
        this.cart_list.map((val, idx) => {
          if (index != idx) this.cart_list[idx].show = false;
        });
        var mcharr = this.mch_list;
        for (var j = 0; j < mcharr.length; j++) {
          for (var m = 0; m < mcharr[j].list.length; m++) {
            mcharr[j].list[m].show = false;
          }
        }
      }
      if (type == "mch") {
        let goods = this.mch_list[mchIndex].list;
        goods[index].show = true;
        goods.map((val, idx) => {
          if (index != idx) goods[idx].show = false;
        });
        var mcharr = this.mch_list;
        for (var j = 0; j < mcharr.length; j++) {
          if (j != mchIndex) {
            for (var m = 0; m < mcharr[j].list.length; m++) {
              mcharr[j].list[m].show = false;
            }
          }
        }
        this.cart_list.forEach((item) => {
          item.show = false;
        });
      }
    },
    clickOption(e, index, type, mchIndex) {
      if (type == "cart") {
        if (index == 0) {
          let id = this.cart_list[e].cart_id;
          this.deleteGoods([id]);
        }
      }
      if (type == "mch") {
        if (index == 0) {
          let id = this.mch_list[mchIndex].list[e].cart_id;
          this.deleteGoods([id]);
        }
      }
    },
    // 点击滑动按钮删除商品
    deleteGoods(id) {
      var params = {
        cart_id_list: JSON.stringify(id)
      };
      this.$allrequest.goodscart.deleteCart(params).then((res) => {
        if (res.code == 0) {
          this.getShopList();
        }
      });
    },
    // 批量移入收藏商品
    collectGoods() {},
    // 点击规格选择规格
    chooseSku(e) {
      if (this.goodsDisabled(e)) return;
      this.cartGoodInfo = e;
      this.skuData = {
        goodsId: e.goods_id,
        cartId: e.cart_id
      };
      this.$refs["sku-popup"].showPopup();
    },
    // 获取地址列表
    async getAddressList() {
      try {
        const res = await this.$allrequest.user.address_list();
        if (res.code == 0) {
          let list = res.data.list;
          let index = list.findIndex((item) => {
            return item.is_default == 1;
          });
          if (index > -1) {
            this.address = list[index];
          } else {
            this.address = null;
          }
        }
      } catch (e) {}
    },
    gotoAdd() {
      this.$utils.toUrl("/pages/home/home", "switchtab");
    },
    calculateLevelPrice() {
      let totalPrice = 0;
      let totalMemberPrice = 0;

      this.cart_list.reduce((acc, item) => {
        if (item.is_checked) {
          const num = item.num;
          const memberPriceNum = parseFloat(item.level_price);
          const priceNum = parseFloat(item.price);
          totalPrice += priceNum;
          if (memberPriceNum > 0) {
            totalMemberPrice += memberPriceNum * num;
          } else {
            totalMemberPrice += priceNum;
          }
        }
        return acc;
      }, 0);

      if (totalMemberPrice > 0)
        this.levelPrice = (totalPrice - totalMemberPrice).toFixed(2);
    },

    calculateShippingFee() {
      var params = {
        cart_id_list: JSON.stringify(this.select_cartid)
      };

      this.$allrequest.goodscart.getCartList(params).then((res) => {
        this.shipping_fee = res.data.shipping_fee;
      });
    },
    logIsAnyLevelMemberStatus() {
      console.log("isAnyLevelMember:", this.isAnyLevelMember);
    },

    scan() {
      uni.scanCode({
        success: async (res) => {
          try {
            let { result: scan_code } = res;
            const scanRes = await this.$allrequest.goodscart.scanAddCart(
              {
                scan_code
              },
              true
            );
            if (!scanRes.code) {
              this.getShopList();
            } else {
              this.$utils.toast(res.msg);
            }
          } catch (error) {
            this.$utils.toast(error || "发生未知错误");
          }
        }
      });
    }
  },
  onLoad() {},
  mounted() {
    this.logIsAnyLevelMemberStatus();
  },
  onHide() {
    if (this.cart_list.length) {
      this.cart_list.forEach((el) => {
        if (el.seckill_activity_goods) {
          clearInterval(el.timer);
        }
      });
    }

    if (this.mch_list.length) {
      this.mch_list.forEach((el) => {
        if (el.seckill_activity_goods) {
          clearInterval(el.timer);
        }
      });
    }
  },

  onShow() {
    // 判断是否登录
    const isLogin = this.$utils.isLogin(false);
    this.isLogin = isLogin;
    if (!isLogin) {
      this.$store.commit(
        "setNoLoginTabarPath",
        "/pages/shoppingcart/shoppingcart"
      );
      this.$store.commit("setRouteType", "switchtab");
    }
    this.edit = false;
    this.mdData = null;
    let mdInfo = uni.getStorageSync("storeMdData");
    if (mdInfo) {
      mdInfo = JSON.parse(mdInfo);
      this.mdData = mdInfo;
    }

    uni.getSystemInfo({
      success: (e) => {
        this.bottom = e.safeAreaInsets.bottom;
      }
    });
    this.getShopList();
    setTimeout(() => {
      try {
        this.useFoot = this.$utils.useFoot(this.controls);
      } catch (e) {}
    }, 500);
  },
  computed: {
    getDownTime() {
      return (list) => {
        if (list.length) return `${list[0]}天 ${list[1]}:${list[2]}:${list[3]}`;
        return "";
      };
    },
    isAnyLevelMember() {
      return this.cart_list.some((item) => item.user_is_level);
    },

    // bottomStyle() {
    //   return {
    //     bottom: this.useFoot
    //       ? this.bottom == 0
    //         ? "100rpx"
    //         : "calc(env(safe-area-inset-bottom) + 100rpx)"
    //       : "0px",
    //   };
    // },
    boxStyle() {
      // if (!this.cart_list.length && !this.mch_list.length)
      // 	return {
      // 		backgroundColor: "#ffffff",
      // 	};
      // // 计算底部tabBar高度
      // let bottomH = this.useFoot ?
      // 	this.bottom == 0 ?
      // 	"200rpx" :
      // 	"(env(safe-area-inset-bottom) + 200rpx)" :
      // 	"0px";
      return {
        // height: `calc(100vh - ${bottomH} - ${this.statusBarHeight}px - 80rpx)`,
      };
    }
  },
  filters: {
    price(e) {
      return e.toFixed(2);
    },
    priceBeforeZero(val) {
      let str = val + "";
      if (str.indexOf(".") < 0) return `${str}.`;
      return str.substr(0, str.indexOf("."));
    },
    priceAfterZero(val) {
      let str = val + "";
      if (str.indexOf(".") < 0) return "00";
      let subedStr = str.substr(str.indexOf("."), str.length);
      if (subedStr.length > 2) return subedStr.substr(0, 3);
      return subedStr;
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-bottom: 0;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  box-sizing: border-box;
  // height: calc(100rpx);
  // height: calc(100rpx + constant(safe-area-inset-bottom));
  // height: calc(100rpx + env(safe-area-inset-bottom));
}

.shoppingcart {
  background-color: #f5f5f5;
  flex: 1;
  overflow: hidden;

  scroll-view {
    height: 100%;
    overflow-y: auto;
  }
}

.cat-title {
  // position: fixed;
  // top: 0;
  // left: 0;
  // z-index: 9999;
  // width: 100%;
  line-height: 80rpx;
  text-align: center;
  background-color: #fff;

  font-size: 36rpx;
  font-weight: 600;
  color: rgba(29, 29, 29, 0.94);
}

.fixedBox {
  // position: fixed;
  // top: 0;
  // left: 0;
  width: 100%;
  // z-index: 9999;

  .locationBox {
    z-index: 10000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    height: 80rpx;
    padding: 0 24rpx;
  }

  .fixedShop {
    z-index: 10000;
    width: 100%;
    height: 60rpx;
    background-color: pink;
  }
}

.no-goods {
  margin-top: 120rpx;
  text-align: center;
  padding-top: 80rpx;

  image {
    width: 376rpx;
    height: 200rpx;
    display: block;
  }

  .no-goods-text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #8c8c8c;
  }

  .no-goods-btn {
    width: 240rpx;
    height: 80rpx;
    background: #f0250e;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #ffffff;
    margin: 30rpx auto 0;
  }
}

.cartBox {
  padding-top: 14rpx;
}

.shoppingcart-list {
  flex: 1;
  padding: 0 10rpx;
  // margin-bottom: 24rpx;
  width: 100%;
  background-color: #ffffff;
}

.list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 24rpx 0 24rpx;

  > view:first-child {
    display: flex;
    align-items: center;
    line-height: 1;

    > image {
      width: 32rpx;
      min-width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
    }

    .list-title-right {
      margin-left: 24rpx;
      display: flex;
      align-items: center;

      image:first-child {
        width: 28rpx;
        min-width: 28rpx;
        height: 28rpx;
      }

      view {
        font-size: 28rpx;
        color: #262626;
        font-weight: 600;
      }

      image:last-child {
        width: 12rpx;
        height: 20rpx;
      }
    }
  }

  > view:last-child {
    view {
      width: 84rpx;
      min-width: 84rpx;
      height: 34rpx;
      line-height: 34rpx;
      border-radius: 17rpx;
      text-align: center;
      background-color: #fde9e7;
      font-size: 20rpx;
      color: #fa2c19;
    }
  }
}

.content-right-huangou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 10rpx 0 68rpx;

  > view:first-child {
    display: flex;
    align-items: center;

    view:first-child {
      font-size: 18rpx;
      padding: 4rpx 8rpx;
      border-radius: 4rpx;
      background-color: #f62b16;
      color: #ffffff;
    }

    view:last-child {
      margin-left: 12rpx;
      font-size: 24rpx;
      color: #2e2d2d;
      font-weight: bold;
    }
  }

  > view:last-child {
    display: flex;
    align-items: center;

    view {
      font-size: 24rpx;
      color: #2e2d2d;
    }

    image {
      margin-left: 12rpx;
      width: 12rpx;
      height: 20rpx;
    }
  }
}

.list-content {
  display: flex;
  bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  padding: 0 24rpx;
  align-items: center;

  .content-left {
    margin-right: 24rpx;

    image {
      width: 32rpx;
      min-width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
    }
  }

  .content-right {
    flex: 1;
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1px solid #f2f2f2;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      border-radius: 10rpx;
      position: relative;

      .pic {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
        display: block;
      }
    }

    .content-right-one {
      margin-left: 24rpx;
      flex: 1;

      .content-right-one-title {
        font-size: 26rpx;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .content-right-one-configure {
        margin-top: 20rpx;
        // width: auto;
        display: inline-block !important;
        // display: inline;
        height: 40rpx;
        padding: 0 15rpx;
        border-radius: 99px;
        background-color: #f6f6f6;
        box-sizing: border-box;

        .skuBox {
          display: flex;
          align-items: center;

          > view {
            flex: 1;

            text {
              height: 40rpx;
              line-height: 40rpx;
              font-size: 22rpx;
              color: #8c8c8c;
            }
          }

          image {
            margin-left: 10rpx;
            width: 12rpx;
            min-width: 12rpx;
            height: 6rpx;
          }
        }
      }

      .content-right-onepromotion {
        margin: 18rpx 0rpx 0rpx;

        view {
          display: inline-block;
          font-size: 18rpx;
          color: #ffffff;
          padding: 6rpx 14rpx;
          border-radius: 4rpx;
          background-color: #f2270c;
        }
      }

      .snap {
        margin-top: 24rpx;
        margin-bottom: 24rpx;
        display: flex;
        font-size: 20rpx;
        color: #f2270c;
        display: flex;
        align-items: center;

        text {
          width: 1px;
          height: 12rpx;
          background-color: #f9a89f;
          margin: 0 12rpx;
        }
      }

      .seckill {
        display: flex;
        align-items: center;
        width: auto;
        height: 32rpx;
        padding: 0 14rpx;
        border-radius: 16rpx;
        background: linear-gradient(90deg, #fee0de, #ffffff);
        font-size: 20rpx;
        color: #fa2c19;

        .title {
          display: flex;
          align-items: center;

          text {
            margin-left: 5rpx;
          }
        }

        .line {
          width: 1px;
          height: 12rpx;
          background: #f7271f;
          margin: 0 12rpx;
        }
      }

      .price {
        flex: 1;
        margin-top: 18rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        view:first-child {
          display: flex;
          align-items: baseline;

          text:nth-child(1) {
            font-size: 28rpx;
            color: #f2270c;
            font-weight: bold;
          }

          text:nth-child(2) {
            font-size: 40rpx;
            color: #f2270c;
            font-weight: bold;
          }

          text:nth-child(3) {
            font-size: 28rpx;
            color: #f2270c;
            font-weight: bold;
          }
        }
      }

      .gift {
        margin-top: 24rpx;

        > view:first-child {
          font-size: 22rpx;
          color: #2e2d2d;
        }

        > view:last-child {
          margin-top: 10rpx;
          display: flex;
          align-items: center;

          view:first-child {
            font-size: 22rpx;
            color: #2e2d2d;
            font-weight: bold;
          }

          view:last-child {
            flex: 1;
            width: 0rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 12rpx;
            font-size: 22rpx;
            color: #2e2d2d;
          }
        }
      }
    }

    .content-grey {
      .content-right-one-title {
        color: #bfbfbf;
      }

      .content-right-one-configure {
        .skuBox {
          view {
            text {
              color: #bfbfbf;
            }
          }
        }
      }

      .price {
        view:first-child {
          color: #bfbfbf;
        }

        view:last-child {
          opacity: 0.5;
        }
      }
    }
  }

  .content-right.noBorder {
    border-bottom: none;
  }
}

.cart-bottom {
  // position: fixed;
  // left: 0rpx;
  width: 100%;
  height: 97rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 24rpx;
  background-color: #ffffff;
  bottom: 0;
  bottom: calc(0 + constant(safe-area-inset-bottom));
  bottom: calc(0 + env(safe-area-inset-bottom));

  > view:first-child {
    display: flex;
    align-items: center;

    > view:first-child {
      display: flex;
      align-items: center;

      image {
        width: 32rpx;
        min-width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
      }

      view {
        font-size: 24rpx;
        color: #262626;
      }
    }

    > view:last-child {
      display: flex;
      align-items: center;

      view:first-child {
        font-size: 30rpx;
        color: #262626;
      }

      view:last-child {
        font-size: 24rpx;
        color: #262626;
        margin-left: 8rpx;
      }
    }
  }

  > view:last-child {
    display: flex;
    align-items: center;

    > view:last-child {
      width: 180rpx;
      height: 74rpx;
      border-radius: 38rpx;
      font-size: 26rpx;
      color: #ffffff;
      text-align: center;
      line-height: 74rpx;
      background: linear-gradient(90deg, #f3150c, #f14b0c);
    }

    .total-price-box {
      display: flex;
      align-items: baseline;
      margin-right: 24rpx;

      view:nth-child(1) {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
      }

      .price-box {
        display: flex;
        align-items: baseline;

        text:nth-child(1) {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }

        text:nth-child(2) {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }

        text:nth-child(3) {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
      }
    }
  }
}

.cart-adit {
  // position: fixed;
  // left: 0rpx;
  // width: 100%;
  height: 97rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 24rpx;
  background-color: #ffffff;

  > view:first-child {
    display: flex;
    align-items: center;

    image {
      width: 32rpx;
      min-width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
    }

    view {
      margin-left: 8rpx;
      font-size: 24rpx;
      color: #262626;
    }
  }

  > view:last-child {
    display: flex;
    align-items: center;

    view {
      width: 180rpx;
      height: 74rpx;
      background: #f0250e;
      border-radius: 38rpx;
      font-size: 26rpx;
      color: #ffffff;
      text-align: center;
      line-height: 74rpx;
      background: linear-gradient(90deg, #f3150c, #f14b0c);
    }
  }
}

/deep/ .u-numberbox .u-icon-minus {
  width: 48rpx;
}

/deep/ .u-numberbox .u-number-input {
  width: 70rpx !important;
  margin: 0 !important;
}

.seckill-con {
  display: flex;
  align-items: center;
  color: #f0250e;
  font-size: 24rpx;
  padding-top: 20rpx;

  .seckill-line {
    margin: 0 12rpx 0 24rpx;
  }
}

.seckill-times {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  height: 36rpx;
  padding: 0 14rpx;
  border-radius: 32rpx;
  background: linear-gradient(85deg, #fee7e5 0%, #ffffff 100%);
  font-size: 20rpx;
  color: #f0250e;

  .let {
    font-weight: bold;
  }
}

.seckill-line {
  display: inline-block;
  margin: 0 12rpx;
  vertical-align: middle;
  width: 2rpx;
  height: 14rpx;
  background: #f0250e;
}

.goods-seckill {
  padding-top: 14rpx;
  font-size: 24rpx;
  color: #ff5c26;
}

.cart_tip {
  padding-top: 14rpx;
  padding-left: 14rpx;
  color: #f00e0e;
}

.bottomStyle {
  bottom: 100rpx;
  bottom: calc(100rpx + constant(safe-area-inset-bottom));
  bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.flexedBoxRight {
  color: #999;
}

.editLocation {
  margin-left: 10rpx;
}

.icon-scanning {
  position: relative;
  margin-right: 4rpx;
  font-size: 40rpx;
}
</style>
